<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3.x是通过proxy实现响应式的</title>
</head>
<body>
    <div id="app">proxy直接监听对象而不是属性，浏览器会自动优化。proxy是一个构造函数，通过newProxy()创建一个代理对象，当我们想要访问data中属性的时候通过vm访问。</div>
</body>
</html>
<script>
    //模拟vue中的data选项
    let data = {
        msg:'hell',
        count:0
    }
    //模拟vue实例
    /* data 要代理的对象；target 代理的目标对象data，key设置的属性  */
    let vm = new Proxy(data,{
        //执行代理行为的函数
        //当访问vm的成员会执行
        get(target,key){
            return target[key]
        },
        //当设置vm的成员会执行
        set(target,key,newValue){
            if(newValue === target[key]) return 
            target[key] = newValue
            document.querySelector('#app').innerHTML = target[key]
        }
    })


</script>